@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.is-site-or-domain {
	.step-wrapper__header {
		margin-bottom: 60px !important;
		@media (max-width: $break-mobile) {
			margin: 32px 20px 24px !important;
		}

		.formatted-header__title {
			@media (max-width: $break-mobile) {
				padding: 0 !important;
			}
		}
		.formatted-header__subtitle {
			color: var(--gray-50, #646970) !important;
			font-family: "SF Pro Display", $sans;
			font-size: $font-body-large !important;
			font-style: normal;
			font-weight: 400;
			line-height: 26px;
			letter-spacing: 0.24px;
			margin-top: 4px !important;
			@media (max-width: $break-mobile) {
				padding: 0 !important;
			}
		}
	}

	.step-wrapper__content {
		margin: 0 20px;
	}
}

.site-or-domain__choices {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;

	.select-items {
		gap: 24px;
		padding: 0;
		margin-top: 0;
	}

	.select-items__item {
		border-radius: 4px;
		border: 1px solid var(--gray-gray-5, #dcdcde);
		display: flex;
		padding: 24px;
		justify-content: center;
		align-items: start;
		gap: 8px;
		max-width: 385px;
		.select-items__item-icon {
			position: initial;
		}
		.select-items__item-info-wrapper {
			display: flex;
			align-items: center;
			width: 100%;
			gap: 16px;
			.select-items__item-info {
				padding: 0;

				.select-items__item-title {
					font-size: $font-body-large;
					font-family: "SF Pro Display", $sans;
					font-style: normal;
					font-weight: 500;
					line-height: 26px;
					display: flex;
					gap: 8px;
					margin-bottom: 0;
				}
				.select-items__item-description {
					color: var(--studio-gray-60, #50575e);
					font-size: $font-body-small;
					font-style: normal;
					font-weight: 400;
					line-height: 20px;
					letter-spacing: -0.15px;
					padding-left: 32px;

					strong {
						color: var(--studio-green-40, #00a32a);
						font-weight: 400;
					}
				}
			}
			.select-items__item-button {
				border: 0;
				box-shadow: none;
				min-width: auto;
				padding: 0;
				height: 68px;
				margin: 0;
				background-color: transparent;

				svg {
					position: initial;
					top: 0;
					margin-top: 0;
				}
			}
		}
		.select-items__item-clickable {
			position: absolute;
			width: 100%;
			height: 100%;
			cursor: pointer;
			margin-top: -24px;
		}

	}
	.select-items__item-description {
		strong {
			color: var(--studio-green-60);
		}
	}
	.select-items__item-info-wrapper {
		@include break-mobile {
			align-items: center;
		}
	}
}

.site-or-domain__button {
	text-align: center;
}

.site-or-domain__free-domain-note {
	display: flex;
	color: var(--studio-gray-50);
	font-size: $font-body-small;
	@include break-small {
		padding-left: 60px;
	}
}

body {
	.site-or-domain__choices {
		svg.intent-screen-select-items__item-icon {
			fill: var(--studio-gray-30);
		}
	}
}

.signup .lean-domain-search {

	.step-wrapper__header {
		max-width: 50%;
	}

	.step-wrapper__content {
		max-width: 50%;
	}

	.formatted-header__title {
		max-width: 100%;
		word-wrap: break-word;
	}

	.select-items__item-title {
		max-width: 300px;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	@media (max-width: 600px) {
		.step-wrapper__header {
			max-width: 100%;
		}
		.step-wrapper__content {
			max-width: 100%;
		}
	}
}
